<template>
	<!-- tabs标签页 -->
	<view>
	<view class="tabs">
		<view class="tab_item" :class="tabCur==index?'cur':''" v-for="(item, index) in list" :key="index"
			@click="tabSelect(index)">{{ item.title }}</view>
	</view>
	<view >
		<view class="bill_mon">2021-09</view>
		<view class="bill_info" v-for="(item,index) in bill_list" :key="index">
			<view class="bill_title">
				
				<span>{{item.type_text}}</span>
				<span>{{item.create_time}}</span>
			</view>
			<view>
				<text v-if="item.type==1" style="color: #00C049;">+<text style=" font-weight: bolder;">{{item.amount}}</text></text>
			</view>
		</view>
	</view>
		
	</view>
	

	<!-- 标签页对应的内容 -->
	<!-- <block v-if="tabCur === 0"></block>
    <block v-else-if="tabCur === 1"></block>
    <block v-else></block> -->
</template>

<script>
	import{bill} from"../../../api/mine.js"
	export default {
		onLoad(opt) {
			console.log(opt)
			this.getbill()
		},
		data() {
			return {
				type:1,//1:帐单2.消费 3.充值
				tabCur: 0, // 当前tabs下标
				list: [{
						title: "全部"
					},
					{
						title: "消费"
					},
					{
						title: "充值"
					}
				],
				bill_list:[],//帐单记录
			}
		},
		methods: {
			// 获取帐单
			getbill(){
				bill().then(res=>{
					if(res.status==200){
						console.log(res)
						this.bill_list=res.data.data
					}
				})
			},
			// tab切换
			tabSelect(index) {
				if (this.tabCur === index) return
				this.tabCur = index
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
	}
	.tabs {
		display: flex;
		justify-content: space-evenly;
		font-size: 32rpx;
		background-color: #FFF;
		color: #A9A9A9;
	}

	.tab_item {
	        height: 114rpx;
	        line-height: 100rpx;
	        
	        &.cur {
	            position: relative;
	            color: #7cd242;
	            
	            &::after {
	                content: '';
	                width: 100%;
	                height: 1rpx;
	                position: absolute;
	                bottom: 20rpx;
	                // left: 50%;
	                margin-left: -70rpx;
	                background-color: #7cd242;
	            }
	        }
			}
			.bill_mon{
				height: 88rpx;
				line-height: 88rpx;
				margin-left: 30rpx;
			}
.bill_info{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	background-color: #FFF;
}
.bill_title{
	display: flex;
	flex-direction: column;
	span{
		margin-top: 10rpx;
	}
}
</style>
